<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<meta name="author" content="">
<meta http-equiv="Reply-to" content="@.com">
<meta name="generator" content="PhpED 5.6">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="creation-date" content="11/11/2008">
<meta name="revisit-after" content="15 days">
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="my.css">
<script src="javascripts/raphael.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/g.raphael.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/g.line.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript" charset="utf-8">
    window.onload = function () {
        var r = Raphael("holder");
        r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif"; //dinh dang font chu cho chart
        
        var x = [], y = [], y2 = [], y3 = [];
        for (var i = 0; i < 500; i++) {
            x[i] = i * 10;
            y[i] = (y[i - 1] || 0) + (Math.random() * 7) - 3;
            y2[i] = (y2[i - 1] || 150) + (Math.random() * 7) - 3.5;
            y3[i] = (y3[i - 1] || 300) + (Math.random() * 7) - 4;
        }

        //r.g.text(160, 10, "Simple Line Chart");
        //r.g.text(480, 10, "shade = true");
        //r.g.text(160, 250, "shade = true & nostroke = true");
        r.g.text(100, 10, "Symbols, axis and hover effect"); //Vi tri xuat hien tieu de chart

        //r.g.linechart(10, 10, 300, 220, x, [y, y2, y3]);
        //r.g.linechart(330, 10, 300, 220, x, [y, y2, y3], {shade: true});
        //r.g.linechart(10, 250, 300, 220, x, [y, y2, y3], {nostroke: true, shade: true});
        //()x,y,width,height,[[x1 array],[x2 array]],[[y1 array],[y2 array]])
        var lines = r.g.linechart(10, 30, 600, 250, [[1, 2, 3, 4, 5, 6, 7],[3.5, 4.5, 5.5, 6.5, 7, 8],[2, 2.5, 4, 6, 6.5, 7.5]], [[12, 32, 23, 15, 17, 27, 22], [10, 20, 30, 25, 15, 28], [11, 15, 25, 10, 30, 26]], {nostroke: false, axis: "0 0 1 1", symbol: "o"}).hoverColumn(function () {
            this.tags = r.set();
            for (var i = 0, ii = this.y.length; i < ii; i++) {
                this.tags.push(r.g.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{fill: "#fff"}, {fill: this.symbols[i].attr("fill")}]));
            }
        }, function () {
            this.tags && this.tags.remove();
        });
        // lines.lines[0].animate({"stroke-width": 6}, 1000);
        // lines.symbols[0].attr({stroke: "#fff"});
        // lines.symbols[0][1].animate({fill: "#f00"}, 1000);
    };
</script>  
<style type="text/css">
#holder {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px #666;
    background: #ddd url(images/bg.png);
    margin: 0 auto;
    width: 620px;
    height: 300px;
}
</style>  
</head>
<body>
    <div id="holder"></div>
</body>
</html>
